

import React, { Component } from 'react';
import {Layout,Menu} from "antd"
import myuser from '../../mobx/myuser';
import {observer} from "mobx-react"
import {MenuUnfoldOutlined,MenuFoldOutlined} from "@ant-design/icons"
import {menuList} from "../../utils/route"
import { history } from '../../utils';
import {withRouter} from "react-router-dom"
const {Sider} = Layout
const { SubMenu } = Menu;

@withRouter
@observer
class SideMenu extends Component {

    renderMenuItem=(menuList)=>{
        var {user} = myuser

        return menuList.map((item,i)=>{
            if(item.children){
                if(user.role>=item.premission){
                    return (
                        <SubMenu  key={item.path} icon={item.icon} title={item.name}>
                            {this.renderMenuItem(item.children)}
                        </SubMenu>
                    )
                }else{
                    return null
                }
            }else{
                if(user.role>=item.premission){
                    return (
                        <Menu.Item  key={item.path} icon={item.icon}>
                            {item.name}
                        </Menu.Item>
                    )
                }else{
                    return null
                }
            }
        })
    }

    menuItemClick=(item)=>{
        history.push(item.key)
    }

    render() {
        const {location} = this.props;
        const pathname = location.pathname;
        const selectedKeys = [pathname]
        const names = pathname.split("/")
        const defaultOpenKeys	 =  ['/'+names[1]+"/"+names[2]]
        return (
           <Sider trigger={null} collapsible collapsed={myuser.collapsed} style={{width:200,height:"100%",color:"#fff",backgroundColor:"#000",position:"relative"}}>
               <img src={require("../../assets/images/logo.jpg").default} style={{width:"100%"}} alt=""/>
               <Menu
                style={{backgroundColor:"#000"}}
                defaultOpenKeys={['sub1']}
                mode="inline"
                theme="dark"
                selectedKeys={selectedKeys}
                defaultOpenKeys={defaultOpenKeys}
                inlineCollapsed={myuser.collapsed}
                onClick={this.menuItemClick}
               >
                   {this.renderMenuItem(menuList)}
               </Menu>
               <p style={{fontSize:24,position:"absolute",bottom:0,right:25}}>
                    {React.createElement(myuser.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: ()=>myuser.changeCollapsed(),
                    })}
                </p>
           </Sider>
        );
    }
}

export default SideMenu;